<template>
  <el-row :gutter="20" class="physical-model">
    <el-col :span="5" class="model-wrap">
      <ModelTree
        ref="modeTreeRef"
        :filed-options="filedOptions"
        @select-schema="updateSchema"
        @select-model="updateSelect"
      />
    </el-col>
    <el-col :span="19" class="model-wrap">
      <div class="model-table">
        <el-tabs v-model="activeName">
          <el-tab-pane label="表字段" name="tableFields"> </el-tab-pane>
          <el-tab-pane label="表信息" name="tableInfo"> </el-tab-pane>
          <el-tab-pane label="关联关系" name="tableRelation"> </el-tab-pane>
        </el-tabs>
        <div class="model-info">
          <TableFields
            :table-fields="localFieldList"
            :model-status="modelStatus"
            :filed-options="filedOptions"
            :model-info="selectModelInfo"
            v-if="activeName === 'tableFields'"
          />
          <TableInfo
            :table-info="localModelResp"
            :schema-info="selectSchemaInfo"
            :data-sources="dataSources"
            v-if="activeName === 'tableInfo'"
          />
          <TableRelation
            :table-list="modelRelationList"
            v-if="activeName === 'tableRelation'"
          />
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import ModelTree from "./components/ModelTree.vue";
import TableFields from "./components/TableFields.vue";
import TableInfo from "./components/TableInfo.vue";
import TableRelation from "./components/TableRelation.vue";

export default {
  name: "PhysicalModel",
  components: {
    ModelTree,
    TableFields,
    TableInfo,
    TableRelation,
  },
  data() {
    return {
      // 全部数据源
      dataSources: [],
      // 表字段类型
      filedOptions: [],
      // 激活tabs
      activeName: "tableFields",
      // 选中的域信息
      selectSchemaInfo: {},
      // 选中的model详细信息
      selectModelInfo: {},
    };
  },
  provide() {
    return {
      filedOptions: () => this.filedOptions,
    };
  },
  computed: {
    localFieldList() {
      return this.selectModelInfo?.localFieldList || [];
    },
    modelStatus() {
      return this.selectModelInfo?.modelStatus;
    },
    localModelResp() {
      return this.selectModelInfo?.localModelResp || {};
    },
    modelRelationList() {
      return this.selectModelInfo?.modelRelationList || [];
    },
  },
  created() {
    this.getDataSourceList();
    this.getFieldData();
  },
  methods: {
    // 获取数据资源库
    getDataSourceList() {
      this.$axios
        .post(this.$api.dataConnection.businessData.getDataSourceList, {
          pageNum: 1,
          pageSize: 100,
        })
        .then((res) => {
          const sourceInfo = res.data.data;
          this.dataSources = sourceInfo.list || [];
        });
    },
    // 获取字段类型
    getFieldData() {
      this.$axios
        .post(this.$api.dataConnection.physicalModel.getFieldTypes)
        .then((res) => {
          this.filedOptions = res.data.data || [];
        });
    },
    updateSchema(info) {
      this.selectSchemaInfo = info;
    },
    updateSelect(info) {
      this.selectModelInfo = info;
    },
  },
};
</script>
<style lang="scss" scoped>
.physical-model {
  // width: 100%;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.model-wrap {
  height: 100%;
}

.model-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
}

.model-info {
  flex: 1;
  overflow: hidden;
}
</style>
